<template>
	<view class="detail">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{post.title}}</block>
		</cu-custom>
		<Loading :loadModal="loadModal" :hint="hint"></Loading>
		<view class="load-progress" :class="loadProgress!=0?'show':'hide'" :style="[{top:CustomBar+'px'}]">
			<view class="load-progress-bar bg-green"
				:style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view>
			<view class="load-progress-spinner text-green"></view>
		</view>
		<view class="cu-card dynamic no-card">
			<view class="cu-item shadow">
				<view class='text-content margin-top-sm'>{{post.title}}</view>
				<view class="grid col-1 flex-sub padding-lr">
					<view class="bg-img only-img" :style="'background-image:url('+post.defaultImageUrl+')'" />
				</view>
				<view class='text-gray text-sm text-right padding'>
					<text class="cuIcon-people">{{post.author}}</text>
					<text class="cuIcon-time">{{post.createTime}}</text>
					<text class="cuIcon-attention">{{!!post.totalVisits?post.totalVisits:0}}</text>
					<text
						:class="Operate.islike?'cuIcon-appreciatefill text-red':'cuIcon-appreciate text-gray'">{{post.totalZans}}</text>
					<text class="cuIcon-message"> {{!!post.totalComments?post.totalComments:0}}</text>
				</view>
				<view id='b_comment'>
				   <towxml :nodes="post.content" />
				</view>
				<view class="margin-xs padding-sm text-blue" @tap='showoriginalUrl'>阅读原文</view>
				<view class="like-area flex-sub text-center padding" v-if="isShowDonate">
					<view class="cu-avatar xl round" :class="'bg-'+color" @click="showQrcode">
						赏
					</view>
					<view class="padding">您的支持是对我最大的鼓励</view>
				</view>

				<view class="bg-white">
					<scroll-view scroll-x="true" scroll-with-animation>
						<view class="cu-avatar-group ">
							<view class="cu-avatar bg-white round lg" v-for="(item,index) in avatarList" :key="index"
								:style="[{ backgroundImage:'url(' + item.user_cover + ')' }]"></view>
						</view>
					</scroll-view>
				</view>

				<!-- 评论列表 -->
				<view class="cu-bar bg-white solid-bottom">
					<view class='action'>
						<text class='icon-titles text-orange '></text>
						<view class="cu-capsule radius">
							<view class='cu-tag bg-red'>评论</view>
							<view class='cu-tag line-red'>{{post.totalComments}}</view>
						</view>
					</view>
				</view>
				<view class="cu-list menu menu-avatar comment solids-top">
					<view class="cu-item" v-for="(item,idx) in commentList" :key="idx" :data-idx="idx">
						<view class="cu-avatar round" :style="'background-image:url('+item.cAvatarUrl+');'"
							:data-id="item._id" :data-name="item.cNickName" :data-openid="item.cOpenId"
							@tap="focusComment"></view>
						<view class='content'>
							<view class='text-grey' :data-id="item._id" :data-name="item.cNickName"
								:data-openid="item.cOpenId" @tap="focusComment">
								{{item.cNickName}}
							</view>
							<view class='text-gray text-content text-df'>{{item.comment}}</view>
							<view class='padding-sm radius  text-sm text-gray'>
								<view class="flex" v-for="(childItem,id) in item.childComment" :key="id">
									<view :data-id="item._id" :data-name="childItem.cNickName"
										:data-openid="childItem.cOpenId" @tap="focusComment">
										<view class='text-grey'>{{childItem.cNickName}}：</view>
									</view>
									<view class='flex-sub'>{{childItem.comment}}</view>
								</view>
							</view>
							<view class='flex justify-between'>
								<view class='text-gray text-df'>{{item.createDate}}</view>
								<view>
									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
									<text class="text-gray margin-left-xs">{{item.childComment.length}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="padding:50rpx"></view>
				<Nodata :noModal="nodata" :hint="nodata_str"></Nodata>

				<!-- 底部功能 -->
				<view class="comment-fixed">
						<view class="cu-bar input">
							<view class="cu-avatar round" :style="'background-image:url('+userInfo.user_cover+');'"
								@tap='showMenuBox'></view>
							<view class='action'>
								<text class='cuIcon-roundaddfill text-grey' @tap='showMenuBox'></text>
							</view>
							<input class='solid-bottom' maxlength="300" cursor-spacing="10" confirm-type="send" :value="commentContent" @input='getInput' :placeholder="placeholder" :focus="focus" @blur="onReplyBlur"></input>
							<button class='cu-btn bg-green shadow-blur' @tap="formSubmit">发送</button>
						</view>
					<view class="cu-list grid col-5 no-border menu-box"
						:class="isShow ? 'emoji-move-in' : 'emoji-move-out'">
						<view class="cu-item item">
							<view class='cuIcon-share text-olive' style="margin-top:0;"></view>
							<text>转发</text>
							<button class="share-button" open-type="share"></button>
						</view>
						<view class="cu-item item" @click.stop="onPoster">
							<view class='cuIcon-pic text-olive' style="margin-top:0;"></view>
							<text>海报</text>
						</view>
						<view class="cu-item item" @tap='postCollection'>
							<view :class="'cuIcon-'+collection.icon+' text-olive'" style="margin-top:0;"></view>
							<text>{{collection.text}}</text>
						</view>
						<view class="cu-item item" @tap='postZan'>
							<view :class="'cuIcon-'+zan.icon+' text-olive'" style="margin-top:0;"></view>
							<text>{{zan.text}}</text>
						</view>
						<view class="cu-item item" @tap='showQrcode'>
							<view class='cuIcon-refund text-olive' style="margin-top:0;"></view>
							<text>赞赏</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<!-- <view class="cu-bar bg-white justify-end">
					<view class="content">授权登录</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view> -->
				<view class="flex padding justify-center">
					<view class="cu-avatar xl margin-top-xl round" :style="'background-image:url('+loginImgUrl+');'"></view>
				</view>
				<view class="padding-xl">
					1、评论，点赞需要授权登录<br />
					2、授权会获取您的头像和昵称
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" v-if="canIUseGetUserProfile" @tap="getUserProfile"> 授权登录 </button>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal" v-if="isShowPosterModal" :class="modalName=='DialogModal2'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">保存海报</view>
					<view class="action" @tap="hidePoster">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<wm-poster Width="680" :imgSrc="poster.imgUrl" :QrSrc="poster.qrUrl" :Title="poster.title"
					:Referrer="poster.referrer" @success="posterGetSuccess"></wm-poster>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hidePoster">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="savePoster">保存</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Loading from '../../components/loading.vue';
	import Nodata from '../../components/nodata.vue';
	import util from '../../utils/util.js';
	import config from '../../utils/config.js';
	import Poster from '../../utils/poster';
	import api from '../../utils/api.js';
	import towxml from '@/static/towxml/towxml'
	import wmPoster from "@/libs/wm-poster/wm-poster.vue";
	export default {
		components: {
			Loading,
			Nodata,
			towxml,
			"wm-poster": wmPoster
		},
		data() {
			return {
				towxmlFunc: require('@/static/towxml/index.js'),
				imgUrl: getApp().globalData.imgUrl,
				CustomBar: getApp().globalData.CustomBar,
				isExamine: getApp().globalData.isExamine,
				isReply: getApp().globalData.isReply,
				isShowDonate: getApp().globalData.isShowDonate,
				donateQrURL: getApp().globalData.imgUrl + getApp().globalData.admire,
				loginImgUrl: getApp().globalData.imgUrl+getApp().globalData.logo,
				color: getApp().globalData.color,
				canIUseGetUserProfile: uni.canIUse('getUserProfile'),
				loadProgress: 0, //加载进度
				loadModal: false, //加载
				nodata: false,
				nomore: false,
				hint: '加载中...', //加载提示
				post: {},
				isShow: false,
				collection: {
					status: false,
					text: "收藏",
					icon: "favor"
				},
				zan: {
					status: false,
					text: "点赞",
					icon: "appreciate"
				},
				userInfo: {},
				commentList: [],
				commentPage: 1,
				nodata_str: "暂无评论，赶紧抢沙发吧",
				commentContent: "",
				placeholder: "评论...",
				focus: false,
				commentId: "",
				toName: "",
				toOpenId: "",
				isShowPosterModal: false, //是否展示海报弹窗
				posterImageUrl: "", //海报地址
				poster: {
					title: '',
					referrer: '',
					imgUrl: '', //海报地址
					qrUrl: '',
				},
				modalName: null,
			}
		},

		onLoad: async function(option) {
			let userInfo = getApp().globalData.userInfo;
			if (Object.keys(userInfo).length > 0) {
				this.userInfo = userInfo;
				await this.getPostRelated(option.id, userInfo.user_id)
			}
			await this.getDetail(option.id);
		},
		methods: {
			getUserProfile: async function(e) {
				let _this = this;
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						if (res.errMsg == 'getUserProfile:ok') {
							new Promise(resolve => {
								resolve(api.updateUserInfo(res.userInfo));
							}).then(result => {
								if (result.result.data.length > 0) {
									getApp().globalData.userInfo = result.result.data[0];
									getApp().globalData.hasUserInfo = true;
									_this.userInfo = result.result.data[0];
									_this.getPostRelated(_this.post._id, _this.userInfo.user_id);
									_this.modalName= null;
								}
								wx.hideLoading();
							})
						}
					}
				})
			},
			/**
			 * 跳转原文
			 */
			showoriginalUrl: function() {
				let url = this.post.originalUrl
				let data = escape(url)
				uni.navigateTo({
					url: '../detail/original?url=' + data
				})
			},
			/**
			 * 获取文章详情
			 */
			getDetail: async function(blogId) {
				if (this.loadProgress < 100) {
					setTimeout(() => {
						this.loadProgress = this.loadProgress + 3;
					}, 300)
				}
				this.hint = '加载中...';
				this.loadModal = true;
				let postDetail = await api.getPostDetail(blogId);
				postDetail.result.content = this.towxmlFunc(postDetail.result.content, 'html')
				this.loadProgress = 0; //加载完成
				this.loadModal = false;
				this.post = postDetail.result;

				console.info(this.post);
				uni.stopPullDownRefresh();
			},
			/**
			 * 获取订阅消息
			 */
			submitContent: async function(content, commentPage, accept) {
				let that = this;
				try {
					this.hint = '加载中...';
					this.loadModal = true;
					this.nomore = false;
					if (that.commentId === "") {
						let data = {
							postId: that.post._id,
							cNickName: that.userInfo.user_name,
							cAvatarUrl: that.userInfo.user_cover,
							cOpenId: that.userInfo.user_id,
							timestamp: new Date().getTime(),
							createDate: util(new Date().getTime(), 6),
							comment: content,
							childComment: [],
							flag: this.isExamine?0:1,
						}
						await api.addPostComment(data, accept);
					}else {
						let childData = [{
							cOpenId: that.userInfo.user_id,
							cNickName: that.userInfo.user_name,
							cAvatarUrl: that.userInfo.user_cover,
							timestamp: new Date().getTime(), //new Date(),
							createDate: util(new Date().getTime(), 6),
							comment: content,
							tNickName: that.toName,
							tOpenId: that.toOpenId,
							flag: this.isExamine?0:1,
						}]
						await api.addPostChildComment(that.commentId, that.post._id, childData, accept)
					}
			
					let commentList = await api.getPostComments(commentPage, that.post._id)
					
					this.loadModal = false;
					if (commentList.data.length === 0) {
						that.nomore = true;
						if (commentPage === 1) {
							that.nodata = true;
						}
					} else {
						let post = that.post;
						post.totalComments = post.totalComments + 1;
						that.commentPage = commentPage + 1;
						that.commentList = commentList.data;
						that.commentContent = "";
						that.nomore = false;
						that.nodata = false;
						that.post = post;
						that.commentId = "";
						that.placeholder = "评论...";
						that.focus = false;
						that.toName = "";
						that.toOpenId = "";
					}
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 1500
					})
				} catch (err) {
					uni.showToast({
						title: '程序有一点点小异常，操作失败啦',
						icon: 'none',
						duration: 1500
					})
					console.info(err)
				} finally {
					uni.hideLoading()
				}
			},
			getInput(e){
				this.commentContent=e.detail.value;
			},
			/**
			 * 提交评论
			 * @param {} e 
			 */
			formSubmit: async function() {
				if (Object.keys(this.userInfo).length == 0) {
					this.showModal();
					return;
				}
				let that = this;
				let commentPage = 1
				let content = this.commentContent;
				
				if (content == undefined || content.length == 0) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none',
						duration: 1500
					})
					return
				}
				let res= await api.msgSecCheck(content);
				if(res.result.code!=200){
					wx.showToast({
						title: res.result.msg,
						icon: 'none',
						duration: 1500
					})
					return
				}
				//提交评论前进行提示		
				uni.showModal({
					title: '友情提醒',
					content: '您的评论管理员审核后才会展现哦～',
					success(res) {
						if (res.confirm) {
							uni.requestSubscribeMessage({
								tmplIds: [config.subcributeTemplateId],
								success(res) {
									console.info(res)
									console.info(res[config.subcributeTemplateId])
									that.submitContent(content, commentPage, res[config
										.subcributeTemplateId]).then((res) => {
										console.info(res)
									})
								},
								fail(res) {
									console.info(res)
									uni.showToast({
										title: '程序有一点点小异常，操作失败啦',
										icon: 'none',
										duration: 1500
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			/**
			 * 点击评论内容回复
			 */
			focusComment: function(e) {
				if(!this.isReply){
					return;
				}
				let that = this;
				let name = e.currentTarget.dataset.name;
				let commentId = e.currentTarget.dataset.id;
				let openId = e.currentTarget.dataset.openid;

				that.commentId = commentId;
				that.placeholder = "回复" + name + ":";
				that.focus = true;
				that.toName = name;
				that.toOpenId = openId;
			},
			/**
			 * 失去焦点时
			 * @param {*} e 
			 */
			onReplyBlur: function(e) {
				let that = this;
				const text = e.detail.value.trim();
				if (text === '') {
					that.commentId = "";
					that.placeholder = "评论...";
					that.toName = "";
				}
			},
			/**
			 * 获取收藏和喜欢的状态
			 */
			getPostRelated: async function(blogId, openId) {
				let where = {
					postId: blogId,
					openId: openId
				}
				let postRelated = await api.getPostRelated(where, 1);
				let that = this;
				for (var item of postRelated.data) {
					if (config.postRelatedType.COLLECTION === item.type) {
						that.collection = {
							status: true,
							text: "已收藏",
							icon: "favorfill"
						}
						continue;
					}
					if (config.postRelatedType.ZAN === item.type) {
						that.zan = {
							status: true,
							text: "已赞",
							icon: "appreciatefill"
						}
						continue;
					}
				}
			},
			onPoster() { //生成海报
				this.hint = '生成海报中...';
				this.loadModal = true;
				this.isShowPosterModal = true;
				this.poster = {
					title: this.post.title,
					referrer: Object.keys(this.userInfo).length>0 ? `${this.userInfo.user_name}分享给你` : '分享给你',
					imgUrl: this.post.defaultImageUrl, //海报地址
					qrUrl: this.imgUrl + getApp().globalData.QRcode
				}
			},
			showModal() {
				this.modalName = "DialogModal1"
			},
			hideModal() {
				this.modalName = null
			},
			posterGetSuccess(res) {
				this.loadModal = false;
				uni.hideLoading();
				this.modalName = 'DialogModal2';
				this.posterImageUrl = res.tempFilePath;
			},
			/**
			 * 生成海报
			 */
			hidePoster: async function() {
				this.isShowPosterModal = false;
				this.modalName = null;
			},
			savePoster() {
				let that = this;
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						uni.saveImageToPhotosAlbum({
							filePath: that.posterImageUrl,
							success: function() {
								that.isShowPosterModal = false;
							}
						});
					}
				})
			},
			/**
			 * 显示隐藏功能
			 */
			showMenuBox: function() {
				if (Object.keys(this.userInfo).length==0) {
					this.showModal();
					return;
				}
				this.isShow = !this.isShow;
			},
			/**
			 * 展示打赏二维码
			 * @param {} e 
			 */
			showQrcode: async function(e) {
				uni.previewImage({
					urls: [this.donateQrURL],
					current: this.donateQrURL
				})
			},
			/**
			 * 收藏功能
			 */
			postCollection: async function() {
				try {
					let that = this;
					that.hint = '加载中...';
					that.loadModal = true;
					let collection = that.collection;
					if (collection.status === true) {
						let result = await api.deletePostCollectionOrZan(that.post._id, config.postRelatedType
							.COLLECTION);
						that.loadModal = false;
						console.info(result)
						that.collection = {
							status: false,
							text: "收藏",
							icon: "favor"
						}
						uni.showToast({
							title: '已取消收藏',
							icon: 'success',
							duration: 1500
						})
					} else {
						let data = {
							postId: that.post._id,
							postTitle: that.post.title,
							postUrl: that.post.defaultImageUrl,
							postDigest: that.post.digest,
							type: config.postRelatedType.COLLECTION
						}
						await api.addPostCollection(data);
						that.loadModal = false;
						that.collection = {
							status: true,
							text: "已收藏",
							icon: "favorfill"
						}

						uni.showToast({
							title: '已收藏',
							icon: 'success',
							duration: 1500
						})
					}
				} catch (err) {
					uni.showToast({
						title: '程序有一点点小异常，操作失败啦',
						icon: 'none',
						duration: 1500
					})
					console.info(err)
				} finally {
					uni.hideLoading()
				}

			},
			/**
			 * 点赞功能
			 */
			postZan: async function() {
				try {
					let that = this;
					that.hint = '加载中...';
					that.loadModal = true;
					let zan = that.zan;
					if (zan.status === true) {
						let result = await api.deletePostCollectionOrZan(that.post._id, config.postRelatedType.ZAN)
						console.info(result)
						that.loadModal = false;
						that.zan = {
							status: false,
							text: "点赞",
							icon: "appreciate"
						}
						uni.showToast({
							title: '已取消点赞',
							icon: 'success',
							duration: 1500
						})
					} else {
						let data = {
							postId: that.post._id,
							postTitle: that.post.title,
							postUrl: that.post.defaultImageUrl,
							postDigest: that.post.digest,
							type: config.postRelatedType.ZAN
						}
						await api.addPostZan(data);
						this.loadModal = false;
						that.zan = {
							status: true,
							text: "已赞",
							icon: "appreciatefill"
						}

						uni.showToast({
							title: '已赞',
							icon: 'success',
							duration: 1500
						})
					}
				} catch (err) {
					uni.showToast({
						title: '程序有一点点小异常，操作失败啦',
						icon: 'none',
						duration: 1500
					})
					console.info(err)
				} finally {
					uni.hideLoading()
				}
			},
		},
		onShareAppMessage: function(res) {
			return {
				title: this.post.title,
				path: `pages/detail/detail?id=${this.post._id}`,
				imageUrl: this.post.defaultImageUrl,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		onPullDownRefresh: async function() { //下拉刷新
		},
		onReachBottom: async function() { //上拉加载
			try {
				let that = this;
				if (that.nomore === true) {
					return;
				}
				that.loadModal = true;
				that.hint = '加载留言中...';
				that.nodata = false;
				let page = that.commentPage;
				let commentList = await api.getPostComments(page, that.post._id)
				that.loadModal = false;
				uni.stopPullDownRefresh();
				if (commentList.data.length === 0) {
					uni.showToast({
						title: '没有更多了！',
						icon: 'none',
						duration: 2000
					})
					that.nomore = true;
					if (page === 1) {
						that.nodata = true;
					}
				} else {
					that.commentPage = page + 1;
					that.commentList = that.commentList.concat(commentList.data);
				}
			} catch (err) {
				console.info(err)
			} finally {
				wx.hideLoading()
			}
		},
	}
</script>

<style>
	.img-plus-style {
		background: cornflowerblue;
		height: 100rpx;
		width: 100rpx;
		position: absolute;
		bottom: 150rpx;
		right: 60rpx;
		z-index: 1;
		border-radius: 50%;
		line-height: 100rpx;
		font-size: 20rpx;

	}

	.img-style {
		background: darkcyan;
		height: 100rpx;
		width: 100rpx;
		position: absolute;
		bottom: 150rpx;
		right: 60rpx;
		opacity: 0;
		border-radius: 50%;
		line-height: 100rpx;
		font-size: 20rpx;
	}

	.poster-btn {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		box-shadow: 2rpx 2rpx 20rpx rgba(123, 154, 211, 0.808);
		background: cornflowerblue;
		position: fixed;
		bottom: 130rpx;
		right: 0;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
	}

	.poster {
		margin: 0 auto;
		transition: all .3s ease-in;
	}

	.hidden {
		transform: translateY(200%);
	}

	.contarin {
		padding: 10rpx 32rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.cite {
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.cu-list.menu>.cu-item .content>view:first-child {
		display: -webkit-box;
		-webkit-box-align: left;
		-webkit-align-items: left;
		align-items: left;
	}

	.comment-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		box-shadow: 0 0 6px rgba(30, 20, 20, 0.1);
		z-index: 1;
		/*margin-bottom:2rpx; */
	}

	.menu-box {
		position: relative;
		height: 160rpx;
		padding: 0;
		box-sizing: border-box;
		margin-bottom: -160rpx;
	}

	.menu-box .item {
		padding-top: 0;
		margin-top: 0;
	}

	.emoji-move-in {
		margin-bottom: 0;
		/*去除动画效果，有点迟钝 2019-05-11*/
		/*-webkit-animation: emoji-move-in 0.3s forwards;
  animation: emoji-move-in 0.3s forwards;*/
	}

	.emoji-move-out {
		margin-bottom: -160rpx;
		/*-webkit-animation: emoji-move-out 0.3s forwards;
  animation: emoji-move-out 0.3s forwards;*/
	}

	.no-emoji-move {
		-webkit-animation: none;
		animation: none;
	}

	.share-button {
		opacity: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		top: 0;
		left: 0;
	}

	@-webkit-keyframes emoji-move-in {
		0% {
			margin-bottom: -160rpx;
		}

		100% {
			margin-bottom: 0;
		}
	}

	@keyframes emoji-move-in {
		0% {
			margin-bottom: -160rpx;
		}

		100% {
			margin-bottom: 0;
		}
	}

	@-webkit-keyframes emoji-move-out {
		0% {
			margin-bottom: 0;
		}

		100% {
			margin-bottom: -160rpx;
		}
	}

	@keyframes emoji-move-out {
		0% {
			margin-bottom: 0;
		}

		100% {
			margin-bottom: -160rpx;
		}
	}
</style>
